<template>
  <div class="catalogue-content">
    <el-form>
      <el-alert
        :title="`共${total}条记录`"
        type="info"
        show-icon
        :closable="false"
        style="margin:20px 0"
      />
      <el-table
        :data="catalogueData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          :index="indexMethod"
          label="序号"
          width="50"
        />
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="100"
        />
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="100"
        />
        <el-table-column
          prop="username"
          label="创建者"
          width="100"
        />
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="110"
        />
        <el-table-column
          prop="totals"
          label="面试题数量"
          width="110"
        />

        <el-table-column label="状态">
          <template #default="{row}">
            {{ row.state===1 ?'已禁用':'已启用' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300">

          <template slot-scope="scope">
            <el-button v-if="scope.row.state===1" type="text" @click="scope.row.state=0">启用</el-button>
            <el-button v-else type="text" @click="scope.row.state=1">禁用</el-button>
            <el-button type="text" :disabled="scope.row.state===1?true:false" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state===1?true:false" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { catalogueListAPI, delcatalogueAPI } from '@/api/subjectManager'
export default {
  name: 'Catalogue',
  data() {
    return {
      // 目录列表数据
      catalogueData: [],
      total: '',
      query: {
        page: 1,
        pagesize: 10
      },
      // 面试题数量
      totals: '',
      isChange: true

    }
  },
  created() {
    this.catalogueList()
  },
  methods: {
    async catalogueList() {
      const resp = await catalogueListAPI(1, 10)
      // 拿到对象数组中的值
      for (const [index, item] of resp.items.entries()) {
        console.log(index, item)
        item.state = +item.state ? '已启用' : '已禁用'
      }
      this.catalogueData = resp.items
      this.total = resp.counts
    },
    indexMethod(index) {
      // 当前页数据的序号+1 +（当前页码-1）*每页条数
      return index + 1 + (this.query.page - 1) * this.query.pagesize
    },

    handleEdit() {

    },
    // 删除
    async handleDel(row) {
      await delcatalogueAPI(row.id)
      this.catalogueList()
      this.$message.success('删除成功')
    }

  }

}
</script>

<style>

</style>
